<template>
  <div id="MyS">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark lis" @click="dialogVisibleOpenUser = true">
          我的资料
          <span>></span>
        </div>
      </el-col>

      <el-col :span="24">
        <div class="grid-content bg-purple-dark lis" @click="myPublishArticle()">
          我发表的文章
          <span>></span>
        </div>
      </el-col>

      <el-dialog title="我发表的文章" :visible.sync="dialogTableVisibleBbs">
        <el-table :data="gridData">
          <el-table-column property="artCreTime" label="日期" width="150"></el-table-column>
          <el-table-column property="artTitle" label="标题" width="200"></el-table-column>
          <el-table-column property="artComNum" label="评论数" width="100"></el-table-column>
          <el-table-column property="artLikeNum" label="点赞数" width="100"></el-table-column>
          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index,scope.row.id, gridData)"
                type="text"
                size="small"
              >移除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="changePage"
          background
          layout="prev, pager, next"
          :page-size="5"
          :total="total"
        ></el-pagination>

        <!-- 
<el-pagination
        @current-change="changePage"

      :page-sizes="[5, 10, 15]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
        </el-pagination>-->
      </el-dialog>

      <el-col :span="24">
        <div class="grid-content bg-purple-dark lis" @click="loginOut">
          退出登录
          <span>></span>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="我的资料" :visible.sync="dialogVisibleOpenUser">
      <el-form :model="user">
        <el-form-item label="账户名 :" :label-width="formLabelWidth">
          <el-input v-model="user.username" disabled></el-input>
          <el-input v-model="user.id" v-if="false" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名 :" :label-width="formLabelWidth">
          <el-input v-model="user.name"></el-input>
        </el-form-item>
        <el-form-item label="邮箱 :" :label-width="formLabelWidth">
          <el-input v-model="user.email"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleOpenUser = false">取 消</el-button>
        <el-button type="primary" @click="subimitForm">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import http from "../../utils/https";
export default {
  name: "My",
  data() {
    return {
      total: 0,
      dialogVisibleOpenUser: false,
      formLabelWidth: "120px",
      dialogTableVisibleBbs: false,
      idshow: true,
      gridData: [],
      user: {
        id: "",
        username: "",
        password: "",
        name: "",
        sex: "",
        age: ""
      }
    };
  },

  beforeCreate() {},

  created() {},

  beforeMount() {},

  mounted() {
    http
      .get({
        url: "/yjl/user/id"
      })
      .then(res => {
        if ((res.code = 200)) {
          this.user = res.content;
        } else {
          this.$message.error("接口异常");
        }
      })
      .catch(err => {
        console.log(err);
      });
  },

  beforeUpdate() {},

  updated() {},

  beforeDestroy() {},

  destroyed() {},

  activated() {
    alert("呵呵女人");
  },

  deactivated() {},

  methods: {

    deleteRow(index,id, rows){
      var userForm ={"id":id}  

      console.log(id),
      http.postJson({
        url:"/yjl/bbs-article/del",
         data: userForm
      }).then(res=>{
          if (res.code == 200) {
           
  
           rows.splice(index, 1);
                  this.$message({
              showClose: true,
              message: "删除成功",
              type: "success"
            });
        } else {
         this.$message.error("操作失败");
        }
      })



    },

    changePage(val) {
      console.log(val);
      let urlTemp = "/yjl/bbs-article/artUserId/5/" + (val - 1) * 5;
      http.get(urlTemp).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.gridData = res.content.data;
          this.total = res.content.count;

        } else {
                      this.$message.error("操作失败");
        }
      });
    },

    myPublishArticle() {
      this.dialogTableVisibleBbs = true;

      http.get("/yjl/bbs-article/artUserId/5/0").then(res => {
        console.log(res);
        if (res.code == 200) {
          this.gridData = res.content.data;
          this.total = res.content.count;
        } else {
            this.$message.error("操作失败");
        }
      });
    },
    subimitForm() {
      let userForm = {
        id: this.user.id,
        username: this.user.username,
        name: this.user.name,
        email: this.user.email
      };
      console.log(userForm);
      http
        .putJson({
          url: "/yjl/user/updateUser",
          data: userForm
        })
        .then(res => {
          if ((res.code = "200")) {
            console.log("122222222222");

            this.$message({
              showClose: true,
              message: "修改成功",
              type: "success"
            });
            this.dialogVisibleOpenUser = false;
          }
        });
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    loginOut() {
      const that = this;
       sessionStorage.setItem("isLogin", true);
            //  that.setshowlogin(true);
            this.$store.dispatch("setIsLogin");
            this.$message({
              message:"退出成功",
              type: "success"
            });
    
    }
  }
};
</script>

<style scoped>
.myDi {
  width: 90%;
  height: 800px;
}

#MyS {
  padding-left: 20px;
  padding-right: 20px;
}

.lis {
  display: flex;
  text-align: left;
  line-height: 50px;
  height: 50px;
  margin-bottom: 20px;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

span {
  margin-left: auto;
  margin-right: 200px;
}
</style>
